<template>
  <div class="mostSell" ref="shopTarget">
   
    <div
      class="demo"
      v-masonry
      gutter="5"
      percent-position="true"
      fit-width="true"
      ref="waterfallTarget"
     
    >
        <div
        v-masonry-tile
        class="card"
        v-for="(item, index) in goodsData"
        :key="index"
        @click="jumpToGoods(item.id)"
        
      >
        <img :src="item.s_goods_photos[0].path" alt="">
        
        <div class="text">
          <p class="instroduction">{{ item.desc }}</p>
          <p class="price"><span style="font-size:13px">￥</span> <span>{{ item.price }}.</span><span>00</span></p>
          <!-- <div class="sell"> 评论{{Math.floor(Math.random() * 10 + 1)}}0+</div> -->
           <div class="box1" v-show="index%3==1&&index%5!=0"> <div class="dicount1">满99-15元</div></div>
          <div class="box2" v-show="index%5==0&&index%3!=1">  <div class="dicount2" >超值捡漏</div><span>仅剩两天</span></div>
        </div>
      </div>
           
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted ,reactive,onUpdated,nextTick} from "vue";

import { get, otherget,getData } from "../../../utils/request.js";
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
const lis = ref(null);
const route = useRoute();
const router = useRouter();
let itemRefs = [];
const goodsData=ref([])
let shopTarget = ref(null);
let waterfallTarget = ref(null);
//数据发生改变触发的生命周期
onUpdated(() => {
  setTimeout(() => {
    nextTick(() => {
     
      let a=waterfallTarget.value.style.height.slice(0,-2)
      shopTarget.value.style.height= Number(a)+'px'
    });
  }, 1000);
});
// 发送id到商品详情页
const jumpToGoods=async(id)=>{
  let itemid=id
  router.push(`/goodsDetail/${id}`)
  
}
// 用在ref上
// const serItemRefs = (el, item) => {
//   // el代表节点
//   // item代表对应节点的数据
//   itemRefs.push({
//     el,
//     item,
//   });
// };
// function getTop(e) {
//   return e.offsetTop;
// }
// function lazyLoad(){
// 	// 获取图片列表，即img标签列表
// 	var imgs = document.querySelectorAll('img');
//   console.log(imgs);
// 	//可视区高度
// 	var h=window.innerHeight
// 	//页面被卷去的高度
// 	var s=document.body.scrollTop
// 	//对图片进行懒加载
// 	for(var i=0;i<imgs.length;i++){
// 		//判断图片是否在可视区内
// 		if(getTop(imgs[i])<(h+s)){
//       console.log(getTop(imgs[i]),h,s);
// 			//由于定时器是一个异步任务，则需要一个立即执行函数，若没有i的值会为图片列表长度
// 			(function(i){
// 				//由于页面真实效果会有一段等待时间，则需要一个定时器定时0.5秒
// 				setTimeout(function(){
// 					var temp=new Image()
// 					//隐形加载图片
//           console.log(imgs[i]);
// 					temp.src=imgs[i].getAttribute('data-src')
// 					//onload判断图片是否加载完毕，真实图片加载完毕，再对图片src赋值
// 					temp.onload=function(){
// 						//用方法二加载图片的话代码如下：img[ii].className=''
// 						imgs[i].src=temp.src;
// 						//让图片显现，有过渡效果慢慢显现并且标记已经加载过了
// 						imgs[i].className='current'
// 					}
// 				},500)
// 			})(i)
// 		}
// 	}
// }
let params = reactive({
  project_id: 234,
  page: 1,
  limit: 10,
});
const getDatas = async () => {
  let res = await otherget("/goods", params);
  goodsData.value = goodsData.value.concat(res.result.rows);
 
//  console.log(res.result.rows);
  return res
};


 

getDatas()
let judege1=true
let judege2=false
const handler=async()=>{

  params.page++
  
  if (judege1) {
    let res=await getDatas()
  
    if (res.result.rows.length==0) {
      
    judege1=false
    judege2=true
  }
  } else if(judege2) {
    Toast.fail({ message: "已经没有商品了哦"});
    judege2=false
  }
  
}

  

  const handle = () => {
    let scrollTop = document.documentElement.scrollTop;
    let clientHeight = document.documentElement.clientHeight;
    let scrollHeight = document.documentElement.scrollHeight;
    // console.log(scrollTop);//滚动条的距离  =内容被卷的高度
    //   console.log(clientHeight);// 元素在浏览器的高度
    // console.log(scrollHeight);// box的高度

    if ((clientHeight + scrollTop) / scrollHeight > 0.97) {
   
        handler()
      
    }
  };
  window.addEventListener("scroll", throttle);

   let previous = 0//记录时间
 function throttle() {
           let wait = 100
        let now = +new Date()
       
        if (now - previous > wait) {
         
            handle()
            
            previous=now
        }

    
}

</script>

<style lang="scss" scoped>
.mostSell {
  width: 100%;
  background-color: #f1f1f1;
  height: 100vh;
  padding-bottom: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
 
  .demo {
    margin: 0 auto;
    margin-top: 1vh;
    width: 100vw;
    height: 100vh;
    background-color: #f1f1f1;
    position: relative;
    list-style: none;
    box-sizing: border-box;
   padding: 1vw;
    .card {
      position: absolute;
      width: 48vw;
      padding: 3vw;
      padding-bottom: 1vh;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 1vh;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
      img {
        width: 100%;
        display: block;
        height: auto;
      }
      .text {
        margin: 0 auto;
        width: 95%;
       
        .instroduction {
          width: 100%;
          text-align: left;
          margin: 1vh  0;
          word-break: break-all;
          display: -webkit-box;

          -webkit-box-orient: vertical;

          -webkit-line-clamp: 2;

          overflow: hidden;
        }
        .price {
         
          color: #ff4142;
          //line-height: 1.5;
          margin: 1vh  0;
          display: block;
          font-size: 16px;
          display: flex;
           align-items: flex-end;
          span{
            font-size:12px;
            
          }
        }
        .price>:nth-child(1){
       
          line-height: 17px
        }
        .price>:nth-child(2){
          font-size: 20px;
          line-height: 19px
        }
        .sell {
          color: #999;
         margin-top: 1vh;
          font-size: 12px;
          display: flex;

        }
        .box1{
          width: 50%;
           padding: 1px;
           border-radius: 10px;
          background-color: rgba($color: #fa1e32, $alpha: .2);
          .dicount1{
            
            background-color: #fa1e32;
            height: 3vh;
            color: white;
            border-radius: 10px;
             line-height: 3vh;
             font-size: 12px;
             font-weight: 700;
             text-align: center;
          }
         
        }
          .box2{
          display: flex;
           padding: 1px;
           border-radius: 10px;
          background-color: rgba($color: #fa1e32, $alpha: .2);
           font-size: 12px;
           line-height: 3vh;
          .dicount2{
             padding: 0 1vw;
            background-color: #fa1e32;
            height: 3vh;
            color: white;
            border-radius: 10px;
             line-height: 3vh;
             font-size: 12px;
             font-weight: 700;
             text-align: center;
            
          }
           span{
              display: block;
              transform: scale(.8,.8);
              color: #fa1e32;
                  font-weight: 700;
             }
         
        }
        
      }
    }
  }
}
</style>
